import type { questionComponentType, QuestionTextareaPropsType } from "@/utils/type"

import { Form, Input } from "antd";
import { useEffect } from "react";

const {TextArea} = Input;


type propsType = questionComponentType & {
  onChange:(value: QuestionTextareaPropsType) => void;
}


export default function TextareaPropComponent(props:propsType) {
   const [form] = Form.useForm();
  const { title, placeholder } = props.props;

  const handleChange = () => {
    props.onChange(form.getFieldsValue())
  }

  useEffect(() => {
    form.setFieldsValue({ title, placeholder })
  }, [title, placeholder, form])
  return (
    <Form
      onValuesChange={handleChange}
      layout="vertical"
      initialValues={{ title, placeholder }}
      form={form}
      disabled={props.isLocked}
    >
      <Form.Item name="title" label="标题" rules={[{ required: true, message: '请输入标题' }]}>
        <Input />
      </Form.Item>

      <Form.Item name="placeholder" label="占位符" rules={[{ required: true, message: '请输入...' }]}>
        <TextArea></TextArea>
      </Form.Item>

    </Form>
  )
}
